<template>
  <el-container>
    <el-aside width="380px" class="slider ml-16">
      <user-info class="mb-16"></user-info>
      <div class="calendar mb-16">
        <h1>当前宽度：{{screenWidth}}</h1>
        <p>日历</p>
      </div>
      <div class="schedule">
        <p>日程</p>
      </div>
    </el-aside>
    <el-main>
      <router-view/>
    </el-main>
  </el-container>
</template>

<script>
import UserInfo from '@/components/UserInfo';
export default {
  name: 'User',
  components: { UserInfo },
  data () {
    return {
      screenWidth: document.body.clientWidth // 网页宽度
    }
  },
  methods: {

  },
  watch: {
    // 监听浏览器窗口宽度变化
    screenWidth (newVal) {
      this.screenWidth = newVal
    }
  },
  created () {

  },
  mounted () {
    window.onresize = () => {
      return (() => {
        window.screenWidth = document.body.clientWidth;
        this.screenWidth = window.screenWidth
      })()
    }
  }
}
</script>

<style scoped lang="scss">
  @import "~_style/mixin.scss";

  .calendar {
    width: 380px;
    height: 386px;
    background: rgba(255, 255, 255, 1);
    border-radius: 10px;
  }

  .schedule {
    width: 380px;
    height: 386px;
    background: rgba(255, 255, 255, 1);
    border-radius: 10px;
  }
</style>
